<template>
  <el-card style="width: 900px;height: 100vh">

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <div style="width: 850px;height: 35vh">
        <el-tab-pane label="文章数据" name="first">
          <el-row :gutter="12">
            <el-col :span="8">
              <el-card style="height: 15vh;width: 250px" shadow="never">
                <div style="position: relative;margin-left: 80px">总粉丝
                  <h1 style=" position: relative;font-size: 50px;margin: 0">0</h1>
                  较前日 --
                </div>
              </el-card>
              <el-card style="height: 15vh;width: 250px;margin-top: 15px" shadow="never">
                <div style="position: relative;margin-left: 80px">取消关注
                  <h1 style=" position: relative;font-size: 50px;margin: 0">0</h1>
                  较前日 --
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">

              <el-card style="height: 15vh;width: 250px" shadow="never">
                <div style="position: relative;margin-left: 80px">互动粉丝
                  <h1 style=" position: relative;font-size: 50px;margin: 0">0</h1>
                  较前日 --
                </div>
              </el-card>
              <el-card style="height: 15vh;width: 250px;margin-top: 15px" shadow="never">
                <div style="position: relative;margin-left: 80px">净增关注
                  <h1 style=" position: relative;font-size: 50px;margin: 0">0</h1>
                  较前日 --
                </div>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card style="height: 15vh;width: 250px" shadow="never">
                <div style="position: relative;margin-left: 80px">新增粉丝
                  <h1 style=" position: relative;font-size: 50px;margin: 0">0</h1>
                  较前日 --
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="粉丝列表" name="second">

        </el-tab-pane>
      </div>
    </el-tabs>
    <el-tabs v-model="activeName2" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="整体分析" name="first">
        <div style="height: 300px">
          <el-steps direction="vertical" :active="1">
            <el-step title="第一周" />
            <el-step title="第二周" />
            <el-step title="第三周" />
          </el-steps>
        </div>
        <el-steps :active="2" align-center>
          <el-step title="第一月" description="Some description" />
          <el-step title="第二月" description="Some description" />
          <el-step title="第三月" description="Some description" />
          <el-step title="第四月" description="Some description" />
        </el-steps>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
const activeName = ref('first')
const activeName2 = ref('first')

</script>

<style scoped>

</style>